﻿<template>
    <div id="app">
        <h-header :headertitle="title"></h-header>
        <p style="margin-top:10px;margin-bottom:10px;">
            <span class="pheader yellow">&nbsp;&nbsp;</span><span class="hheader">签到情况</span>
            <span style="float:right;margin-right:5px;" @click="chooseclass">{{classname}}</span>
        </p>

        <row type="flex">
            <i-col span="6" order="1">
                <div class="round1" @click="view(1)">
                    <div class="round2">
                        <div class="round blue">{{data.sumcount}}</div>
                    </div>

                </div>

                <div class="row1">总人数</div>
                <div class="row2" @click="view(1)">查看详情</div>

            </i-col>
            <i-col span="6" order="2">
                <div class="round1" @click="view(2)">
                    <div class="round2">
                        <div class="round green">{{data.oversign}}</div>
                    </div>
                </div>
                <div class="row1">已签到</div>
                <div class="row2" @click="view(2)">查看详情</div>
            </i-col>
            <i-col span="6" order="3">
                <div class="round1" @click="view(3)">
                    <div class="round2">
                        <div class="round red">{{data.nosign}}</div>
                    </div>
                </div>
                <div class="row1">未签到</div>
                <div class="row2" @click="view(3)">查看详情</div>
            </i-col>
            <i-col span="6" order="4">
                <div class="round1" @click="view(4)">
                    <div class="round2">
                        <div class="round yellow">{{data.leavecount}}</div>
                    </div>
                </div>
                <div class="row1">已请假</div>
                <div class="row2" @click="view(4)">查看详情</div>
            </i-col>
        </row>
        <div class="split"></div>

        <Tabs v-model="tabname">
            <TabPane label="自动打卡" name="tab1">
                <div>
                    <p style="text-align:center;color:#000">请在外接设备上打卡</p>
                    <p style="text-align:center;margin:20px">
                        <img src="../assets/images/icon_dk.png" style="width:30%" />
                    </p>
                </div>
            </TabPane>
            <TabPane label="手动打卡" name="tab2">
                <div>
                    <p style="height:30px;line-height:30px;vertical-align:middle;padding-left:20px;">
                        <span style="float:left;">编号：</span>
                        <input style="float:left;width:60%;" type="text" v-model="code" />
                        <i-button style="float:left;margin-left:10px;" @click="search()">查询</i-button>
                    </p>
                    <p style="text-align:center">
                        <Button type="info" shape="circle" v-bind:style="{ width: '80%',border:'0px',color:'#fff',backgroundColor:signcolor }" @click="manualsign()">立即签到</Button>
                    </p>
                </div>
                <div v-if="studentshow">
                    <p style="height:30px;background-color:#feeac9;line-height:30px;vertical-align:middle;padding-left:10px;color:#b07613;margin-top:10px;">个人信息</p>
                    <Row>
                        <Col span="8" style="padding:20px;">
                        <img :src="student.imgurl" width="100%" />
                        </Col>
                        <Col span="12" style="text-align:left;padding:20px;">
                        <div>
                            <p>姓名：{{student.truename}}</p>
                            <p>编号：{{student.number}}</p>
                            <p>管理老师：{{student.teachername}}</p>
                            <p>所属班组：{{student.classname}}</p>

                        </div>


                        </Col>

                    </Row>
                </div>
            </TabPane>

        </Tabs>

        <mt-popup class="sharePopup" v-model="popupVisible" position="bottom" style="width:100%;">
            <Row style="margin-top:10px;">
                <Col span="12">
                <a style="text-align:center;width:100%;display:block;font-size:18px" @click="close">取消</a>
                </Col>
                <Col span="12">
                <a style="text-align:center;width:100%;display:block;font-size:18px" @click="savetype">确定</a>
                </Col>
            </Row>


            <mt-picker :slots="slots" value-key="classname" @change="typechange"></mt-picker>

        </mt-popup>


    </div>
</template>




<script>
    import header from '../components/header.vue';
    import { Toast } from 'mint-ui';
    import { MessageBox } from 'mint-ui';
    import Bus from '../bus.js'
    var vm;
    export default {
        name: 'app',
        data() {
            return {
                title: "签到",
                data: {},
                code: "",
                student: [],
                signcolor: '#fba81e',
                studentshow: false,
                tabname: "",
                classname: "",
                classid: "",
                popupVisible: false,
                slots: [],
                classnametext:""

            }
        },
        components: {
            'h-header': header,
        },
        methods: {
            view: function (type) {
                Bus.$emit('val', "hide");
                this.$router.push({ name: 'signtj', params: { classid: this.$data.classid,type:type } });

            },
            manualsign: function () {

                this.sign(this.$data.code,"手动打卡");
            },
            chooseclass: function () {
                this.$data.popupVisible = true;

            },
            typechange: function (picker, values) {
                console.log(values);
                if (values.length > 0) {
                    if (values[0].classname == "全部") {
                        this.$data.classnametext = "全部";
                        this.$data.classid = "";
                    } else {
                        this.$data.classnametext = values[0].classname;
                        this.$data.classid = values[0].id;
                    }
                   
                }
            },
            savetype: function () {
              
                this.$data.popupVisible = false;
                this.$data.classname = this.$data.classnametext;
                this.load();
            },
            close: function () {
                this.$data.popupVisible = false;
            },
            sign: function (code,type) {
                console.log("哈哈" + code);
                this.$data.code = code;
              
                var _this = this;

                var mid = window.localStorage.getItem("mid");
                var userid = window.localStorage.getItem("userid");
                var classid = _this.$data.classid;
           


                this.$api.post('wx/Index/sign', {
                    "mid": mid, "number": code, "type": type, 'userid': userid, 'classid': classid
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);
                        var data = response.data;
                        if (data.status == 200) {
                            Toast(data.message);
                            new Audio(
                                'http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + data.data.truename + '签到成功'
                            ).play();

                            _this.load();

                        } else {
                            Toast(data.message);
                        }




                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });



            },
            load: function () {



                var userid = window.localStorage.getItem("userid");
                //classid = 1;
                var _this = this;
                var classid = _this.$data.classid;
                var classname = _this.$data.classname;

                this.$api.post('wx/Index/getsign', {
                    "userid": userid, "classid": classid, 'classname': classname
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);
                        var data = response.data;
                        if (data.status == 200) {


                            _this.$data.data = data.data;

                            if (_this.$data.classnametext == "") {
                                _this.$data.classname = "全部"
                            }
                           
                      

                            var mycalss = data.data.mycalss;

                            var obj = {
                                classid: "",
                                classname: "全部"
                            }
                            mycalss.unshift(obj);
                            let dateSlots = [
                                {
                                    flex: 1,
                                    values: mycalss,
                                    className: 'slot1',
                                    textAlign: 'center'
                                }
                            ];

                            _this.$data.slots = dateSlots;

                        } else {
                            Toast(data.message);
                        }


                        console.log(_this.$data.list);

                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            search: function () {
                var code = this.$data.code;
                var mid = window.localStorage.getItem("mid");
                var _this = this;
                console.log("开始查询");
                this.$api.post('wx/Index/searchstudent', {
                    "mid": mid, "number": code
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);
                        var data = response.data;
                        if (data.status == 200) {
                            _this.$data.student = data.data;
                            _this.$data.studentshow = true;
                            _this.$data.signcolor = "#fba81e";

                        } else {
                            Toast(data.message);
                        }





                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            }

        },
        created: function () {

            //this.$Modal.info({
            //    title: "签到成功",
            //    content: "<a style='color:red'>123<a>"
            //});
            //   MessageBox('提示', "<a style='color:red'>123<a>");

            vm = this;
            this.load();
        }

    }
    window.onload = function () {
        var code = "";
        var lastTime, nextTime;
        var lastCode, nextCode;

        document.onkeypress = function (e) {
            nextCode = e.which;
            nextTime = new Date().getTime();

            if (lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
                code += String.fromCharCode(lastCode);
            } else if (lastCode != null && lastTime != null && nextTime - lastTime > 100) {
                code = "";
            }

            lastCode = nextCode;
            lastTime = nextTime;
        }

        this.onkeypress = function (e) {
            if (e.which == 13) {
                //   console.log(code);
                vm.sign(code,"自动打卡");
                code = "";
            }
        }
    }




</script>

<style>
    @import "../assets/css/mui.min.css";

    .ivu-tabs-tab {
        width: 100% !important;
        text-align: center;
    }

    .ivu-tabs-nav {
        width: 50% !important;
        text-align: center;
    }

    .ivu-tabs-ink-bar {
        background-color: #ffab27 !important;
    }

    .pheader {
        width: 10px;
    }

    .hheader {
        margin-left: 5px;
        color: #000;
        font-size: 16px;
    }

    .round1 {
        text-align: center;
    }

    .round2 {
        border-left: 1px solid #ccc;
    }

    .round {
        width: 60px;
        height: 60px;
        display: inline-block;
        border-radius: 50%;
        overflow: hidden;
        color: #fff;
        font-size: 25px;
        text-align: center;
        line-height: 60px;
        vertical-align: middle;
    }

    .blue {
        background-color: #23d3c9;
    }

    .green {
        background-color: #86cf10;
    }

    .red {
        background-color: #f65c5c;
    }

    .yellow {
        background-color: #feb43b;
    }

    .row1 {
        text-align: center;
        font-size: 16px;
    }

    .row2 {
        text-align: center;
        font-size: 14px;
        color: #558afa;
    }

    .split {
        height: 1em;
        background-color: #efefef;
    }
</style>